<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            /*
             1920px =100vw
             1px = 0.052vw
             16px = 0.832vw
             */
            /* 将html根字体设置成了16px 也就是0.832rem */
            font-size: 0.832vw;
        }

        .box {
            /* display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap:10px;
            /* height: 100vh; */
            width: 55rem;
            margin: 0 auto;
            /* height: 100vh; */
            background-color: rgb(243, 242, 242);
            /* margin:0 auto;  */
        }

        .con {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: masonry;
            grid-gap: 10px;
        }

        .spin {
            text-align: center;
        }

        img {
            width: 100%;
            /* height: 33vh; */
            object-fit: cover;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="con">
            <img src="https://source.unsplash.com/random?0" alt="">
            <img src="https://source.unsplash.com/random?1" alt="">
            <img src="https://source.unsplash.com/random?2" alt="">
            <img src="https://source.unsplash.com/random?3" alt="">
            <img src="https://source.unsplash.com/random?4" alt="">
            <img src="https://source.unsplash.com/random?5" alt="">
            <img src="https://source.unsplash.com/random?6" alt="">
            <img src="https://source.unsplash.com/random?7" alt="">
            <img src="https://source.unsplash.com/random?8" alt="">
            <img src="https://source.unsplash.com/random?9" alt="">
            <img src="https://source.unsplash.com/random?0" alt="">
            <img src="https://source.unsplash.com/random?1" alt="">
            <img src="https://source.unsplash.com/random?2" alt="">
            <img src="https://source.unsplash.com/random?3" alt="">
            <img src="https://source.unsplash.com/random?4" alt="">
            <img src="https://source.unsplash.com/random?5" alt="">
            <img src="https://source.unsplash.com/random?21" alt="">
            <img src="https://source.unsplash.com/random?32" alt="">
            <img src="https://source.unsplash.com/random?43" alt="">
            <img src="https://source.unsplash.com/random?45" alt="">
            <img src="https://source.unsplash.com/random?66" alt="">
            <img src="https://source.unsplash.com/random?13" alt="">
            <img src="https://source.unsplash.com/random?34" alt="">
            <img src="https://source.unsplash.com/random?55" alt="">
            <img src="https://source.unsplash.com/random?721" alt="">
            <img src="https://source.unsplash.com/random?832" alt="">
            <img src="https://source.unsplash.com/random?93" alt="">
            <img src="https://source.unsplash.com/random?245" alt="">
            <img src="https://source.unsplash.com/random?166" alt="">
        </div>
        <div class="spin">加载更多</div>
    </div>
</body>
<script>
    const spinEl = document.querySelector('.spin');
    const imgs = document.querySelectorAll('img');
    let raf = null;
    let data = {
        raf:null,
        allFinished:true
    }
    let ob = new IntersectionObserver((entries) => {
        let entry = entries[0];
        if (entry.isIntersecting) {//loading触底了            
          setTimeout(() => {
                loadMore(4)
            }, 500)
        }
    })
    ob.observe(spinEl)

    const loadMore = (nums) => {
        let conEl = document.querySelector(".con");
        for (let i = 0; i < nums; i++) {
            let imgEl = document.createElement("img");
            imgEl.src = "https://source.unsplash.com/random?" + Math.floor(Math.random() * 1000);
            imgEl.classList.add("newElement")
            conEl.appendChild(imgEl);
        }
        // data.raf = requestAnimationFrame(isLoadFinished)
    }
    // const isLoadFinished = () => {
    //     const newImgs = document.querySelectorAll('.newElement'); //新创的几个img
    //     newImgs.forEach(item => {
    //         if (item.complete) { //如果新创的几个img资源都已加载完成
    //             data.allFinished = true;
    //             newImgs.forEach(itm => {
    //                 itm.classList.remove("newElement");//清楚标记
    //             })
    //         } else {
    //             data.allFinished = false;
    //         }
    //     })
    //     console.log("data.allFinished",data.allFinished);

    //     data.raf = requestAnimationFrame(isLoadFinished)
    //     if (data.allFinished) {
    //         cancelAnimationFrame(data.raf);
    //     }
    // }

</script>

</html>